<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: DataSchema.XML for XML Data</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: DataSchema.XML for XML Data</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
    <p>DataSchema.XML normalizes arbitrary XML data against a given schema into an object with known properties.</p>

    <p><strong>Note:</strong> XML parsing currently has known issues on the Android WebKit browser.</p>
</div>

<div class="example yui3-skin-sam">
    <style scoped>
/* custom styles for this example */
#demo .output {margin-bottom:1em; padding:10px; border:1px solid #D9D9D9;}
</style>

<form id="demo">
    <h4>Basic example</h4>
    <h6>Data</h6>
    <pre>
&lt;root&gt;
    &lt;session&gt;34637542&lt;/session&gt;
    &lt;category name="music" id="5"&gt;&lt;results&gt;
        &lt;song id="59672468"&gt;
            &lt;title&gt;I Kissed A Girl&lt;/title&gt;
            &lt;rank&gt;1&lt;/rank&gt;
            &lt;artist id="30326214"&gt;Katy Perry&lt;/artist&gt;
        &lt;/song&gt;
        &lt;song id="47973564"&gt;
            &lt;title&gt;Shake It&lt;/title&gt;
            &lt;rank&gt;2&lt;/rank&gt;
            &lt;artist id="45575683"&gt;Metro Station&lt;/artist&gt;
        &lt;/song&gt;
        &lt;song id="52207363"&gt;
            &lt;title&gt;Bleeding Love&lt;/title&gt;
            &lt;rank&gt;3&lt;/rank&gt;
            &lt;artist id="37956508"&gt;Leona Lewis&lt;/artist&gt;
        &lt;/song&gt;
    &lt;/results&gt;&lt;/category&gt;
&lt;/root&gt;
    </pre>
    
    <h6>Schema</h6>
    <pre>
{
    resultListLocator: "song",
    resultFields: [{key:"title"}, {key:"artist"}, {key:"rank"}]
}
    </pre>

    <h6>Normalized data</h6>
    <input type="button" id="demo_apply_basic" value="Apply schema =>">
    <div id="demo_output_basic" class="output"></div>

    <h4>Complex example</h4>
    <h6>Data</h6>
    <pre>
&lt;Response&gt;
    &lt;Session&gt;542235629&lt;/Session&gt;
    &lt;Tracks  start="1" count="10" total="98" errorCount="0"
        defaultSort="popularity+" description="Top 100 Tracks"
        name="Top 100 Tracks"&gt;
        &lt;Track id="59672468" rating="-1" title="I Kissed A Girl"&gt;
            &lt;Artist id="30326214" rating="-1"&gt;Katy Perry&lt;/Artist&gt;
            &lt;ItemInfo&gt;&lt;ChartPosition last="26" this="1"/&gt;&lt;/ItemInfo&gt;
        &lt;/Track&gt;
        &lt;Track id="47973564" rating="-1" title="Shake It"&gt;
            &lt;Artist id="45575683" rating="-1"&gt;Metro Station&lt;/Artist&gt;
            &lt;ItemInfo&gt;&lt;ChartPosition last="27" this="2"/&gt;&lt;/ItemInfo&gt;
        &lt;/Track&gt;
        &lt;Track id="52207363" rating="-1" title="Bleeding Love"&gt;
            &lt;Artist id="37956508" rating="-1"&gt;Leona Lewis&lt;/Artist&gt;
            &lt;ItemInfo&gt;&lt;ChartPosition last="28" this="3"/&gt;&lt;/ItemInfo&gt;
        &lt;/Track&gt;
    &lt;/Tracks&gt;
&lt;/Response&gt;
        </pre>

    <h6>Schema</h6>
    <pre>
{
    metaFields: {session:"//Session", total:"//Tracks/@total"},
    resultListLocator: "//Track",
    resultFields: [{key:"song", locator:"@title"},
        {key:"artist", locator:"Artist"},
        {key:"rank", locator:"ItemInfo/ChartPosition/@this"}]
}
    </pre>

    <h6>Normalized data</h6>
    <input type="button" id="demo_apply_complex" value="Apply schema =>">
    <div id="demo_output_complex" class="output"></div>

    <h4>Nested example</h4>
    <h6>Data</h6>
    <pre>
&lt;desserts&gt;
    &lt;dessert type="treat"&gt;
        &lt;name&gt;cupcake&lt;/name&gt;
        &lt;flavors&gt;
            &lt;flavor name="chocolate"/&gt;
            &lt;flavor name="red velvet"/&gt;
        &lt;/flavors&gt;
    &lt;/dessert&gt;
    &lt;dessert type="treat"&gt;
        &lt;name&gt;ice cream&lt;/name&gt;
        &lt;flavors&gt;
            &lt;flavor name="chocolate"/&gt;
            &lt;flavor name="strawberry"/&gt;
            &lt;flavor name="vanilla"/&gt;
        &lt;/flavors&gt;
    &lt;/dessert&gt;
    &lt;dessert type="treat"&gt;
        &lt;name&gt;pie&lt;/name&gt;
        &lt;flavors&gt;
            &lt;flavor name="banana cream"/&gt;
            &lt;flavor name="blueberry"/&gt;
            &lt;flavor name="cherry"/&gt;
        &lt;/flavors&gt;
    &lt;/dessert&gt;
    &lt;dessert type="beverage"&gt;
        &lt;name&gt;hot chocolate&lt;/name>&gt;
    &lt;/dessert&gt;
    &lt;dessert type="beverage"&gt;
        &lt;name&gt;port wine&lt;/name&gt;
    &lt;/dessert&gt;
&lt;/desserts&gt;
</pre>

    <h6>Schema</h6>
    <pre>
{
    resultListLocator: "dessert",
    resultFields: [
        {key:"type", locator:"@type"},
        {key:"name", locator:"name"},
        {key:"flavors", schema: {
            resultListLocator: "flavor",
            resultFields: [
                {key:"flavor", locator:"@name"}
            ]
        }}
    ]
}
    </pre>

    <h6>Normalized data</h6>
    <input type="button" id="demo_apply_nested" value="Apply schema =>">
    <div id="demo_output_nested" class="output"></div>
</form>


<script>
YUI().use("dump", "node", "datatype-xml", "dataschema-xml", function (Y) {
    Y.on("click", function(e){
        var data_in = Y.DataType.XML.parse('<root><session>34637542</session><category name="music" id="5"><results><song id="59672468"><title>I Kissed A Girl</title><rank>1</rank><artist id="30326214">Katy Perry</artist></song><song id="47973564"><title>Shake It</title><rank>2</rank><artist id="45575683">Metro Station</artist></song><song id="52207363"><title>Bleeding Love</title><rank>3</rank><artist id="37956508">Leona Lewis</artist></song></results></category></root>'),
            schema = {
                resultListLocator: "song",
                resultFields: [{key:"title"}, {key:"artist"}, {key:"rank"}] // Or simply ["title", "artist", "rank"]
            };
        Y.one("#demo_output_basic").setContent(Y.dump(Y.DataSchema.XML.apply(schema, data_in)));
    }, "#demo_apply_basic");


    Y.on("click", function(e){
        var data_in = Y.DataType.XML.parse('<Response><Session>542235629</Session><Tracks  start="1" count="10" total="98" errorCount="0"  defaultSort="popularity+"  description="Top 100 Tracks"  name="Top 100 Tracks"  ><Track id="59672468" rating="-1" title="I Kissed A Girl"><Artist id="30326214" rating="-1">Katy Perry</Artist><ItemInfo><ChartPosition last="26" this="1"/></ItemInfo></Track><Track id="47973564" rating="-1" title="Shake It"><Artist id="45575683" rating="-1">Metro Station</Artist><ItemInfo><ChartPosition last="27" this="2"/></ItemInfo></Track><Track id="52207363" rating="-1" title="Bleeding Love"><Artist id="37956508" rating="-1">Leona Lewis</Artist><ItemInfo><ChartPosition last="28" this="3"/></ItemInfo></Track></Tracks></Response>'),
            schema = {
                metaFields: {session:"//Session", total:"//Tracks/@total"},
                resultListLocator: "//Track",
                resultFields: [{key:"song", locator:"@title"}, {key:"artist", locator:"Artist"}, {key:"rank", locator:"ItemInfo/ChartPosition/@this"}]
            };
        Y.one("#demo_output_complex").setContent(Y.dump(Y.DataSchema.XML.apply(schema, data_in)));
    }, "#demo_apply_complex");

    Y.on("click", function(e){
        var data_in = Y.DataType.XML.parse('<desserts><dessert type="treat"><name>cupcake</name><flavors><flavor name="chocolate"/><flavor name="red velvet"/></flavors></dessert><dessert type="treat"><name>ice cream</name><flavors><flavor name="chocolate"/><flavor name="strawberry"/><flavor name="vanilla"/></flavors></dessert><dessert type="treat"><name>pie</name><flavors><flavor name="banana cream"/><flavor name="blueberry"/><flavor name="cherry"/></flavors></dessert><dessert type="beverage"><name>hot chocolate</name></dessert><dessert type="beverage"><name>port wine</name></dessert></desserts>'),
            schema = {
                resultListLocator: "dessert",
                resultFields: [
                    {key:"type", locator:"@type"},
                    {key:"name", locator:"name"},
                    {key:"flavors", schema: {
                        resultListLocator: "flavor",
                        resultFields: [
                            {key:"flavor", locator:"@name"}
                        ]
                    }}
                ]
            };
        Y.one("#demo_output_nested").setContent(Y.dump(Y.DataSchema.XML.apply(schema, data_in)));
    }, "#demo_apply_nested");
});
</script>

</div>

<p>In order to use DataSchema.XML, input data must be an XML document.</p>

<pre class="code prettyprint">YUI().use(&quot;datatype-xml&quot;, &quot;dataschema-xml&quot;, function(Y) {
    var data_in = Y.DataType.XML.parse(&#x27;&lt;root&gt;&lt;session&gt;34637542&lt;&#x2F;session&gt;&lt;category name=&quot;music&quot; id=&quot;5&quot;&gt;&lt;results&gt;&lt;song id=&quot;59672468&quot;&gt;&lt;title&gt;I Kissed A Girl&lt;&#x2F;title&gt;&lt;rank&gt;1&lt;&#x2F;rank&gt;&lt;artist id=&quot;30326214&quot;&gt;Katy Perry&lt;&#x2F;artist&gt;&lt;&#x2F;song&gt;&lt;song id=&quot;47973564&quot;&gt;&lt;title&gt;Shake It&lt;&#x2F;title&gt;&lt;rank&gt;2&lt;&#x2F;rank&gt;&lt;artist id=&quot;45575683&quot;&gt;Metro Station&lt;&#x2F;artist&gt;&lt;&#x2F;song&gt;&lt;song id=&quot;52207363&quot;&gt;&lt;title&gt;Bleeding Love&lt;&#x2F;title&gt;&lt;rank&gt;3&lt;&#x2F;rank&gt;&lt;artist id=&quot;37956508&quot;&gt;Leona Lewis&lt;&#x2F;artist&gt;&lt;&#x2F;song&gt;&lt;&#x2F;results&gt;&lt;&#x2F;category&gt;&lt;&#x2F;root&gt;&#x27;),
        schema = {
            resultListLocator: &quot;song&quot;,
            &#x2F;&#x2F; Or simply [&quot;title&quot;, &quot;artist&quot;, &quot;rank&quot;]
            resultFields: [{key:&quot;title&quot;}, {key:&quot;artist&quot;}, {key:&quot;rank&quot;}]
        },
        data_out = Y.DataSchema.XML.apply(schema, data_in));

    alert(data_out);
});</pre>


<p>The data itself can get fairly complex, with deeply nested nodes and values held in attributes. In your schema, you can use XPath notation to define these locations.</p>

<pre class="code prettyprint">YUI().use(&quot;datatype-xml&quot;, &quot;dataschema-xml&quot;, function(Y) {
    var data_in = Y.DataType.XML.parse(&#x27;&lt;Response&gt;&lt;Session&gt;542235629&lt;&#x2F;Session&gt;&lt;Tracks  start=&quot;1&quot; count=&quot;10&quot; total=&quot;98&quot; errorCount=&quot;0&quot;  defaultSort=&quot;popularity+&quot;  description=&quot;Top 100 Tracks&quot;  name=&quot;Top 100 Tracks&quot;  &gt;&lt;Track id=&quot;59672468&quot; rating=&quot;-1&quot; title=&quot;I Kissed A Girl&quot;&gt;&lt;Artist id=&quot;30326214&quot; rating=&quot;-1&quot;&gt;Katy Perry&lt;&#x2F;Artist&gt;&lt;ItemInfo&gt;&lt;ChartPosition last=&quot;26&quot; this=&quot;1&quot;&#x2F;&gt;&lt;&#x2F;ItemInfo&gt;&lt;&#x2F;Track&gt;&lt;Track id=&quot;47973564&quot; rating=&quot;-1&quot; title=&quot;Shake It&quot;&gt;&lt;Artist id=&quot;45575683&quot; rating=&quot;-1&quot;&gt;Metro Station&lt;&#x2F;Artist&gt;&lt;ItemInfo&gt;&lt;ChartPosition last=&quot;27&quot; this=&quot;2&quot;&#x2F;&gt;&lt;&#x2F;ItemInfo&gt;&lt;&#x2F;Track&gt;&lt;Track id=&quot;52207363&quot; rating=&quot;-1&quot; title=&quot;Bleeding Love&quot;&gt;&lt;Artist id=&quot;37956508&quot; rating=&quot;-1&quot;&gt;Leona Lewis&lt;&#x2F;Artist&gt;&lt;ItemInfo&gt;&lt;ChartPosition last=&quot;28&quot; this=&quot;3&quot;&#x2F;&gt;&lt;&#x2F;ItemInfo&gt;&lt;&#x2F;Track&gt;&lt;&#x2F;Tracks&gt;&lt;&#x2F;Response&gt;&#x27;),
        schema = {
            metaFields: {session:&quot;&#x2F;&#x2F;Session&quot;, total:&quot;&#x2F;&#x2F;Tracks&#x2F;@total&quot;},
            resultListLocator: &quot;&#x2F;&#x2F;Track&quot;,
            resultFields: [
                {key:&quot;song&quot;, locator:&quot;@title&quot;},
                {key:&quot;artist&quot;, locator:&quot;Artist&quot;},
                {key:&quot;rank&quot;, locator:&quot;ItemInfo&#x2F;ChartPosition&#x2F;@this&quot;}
            ]
        },
        data_out = Y.DataSchema.XML.apply(schema, data_in));

    alert(data_out);
});</pre>


<p>Nested schemas are supported as of version 3.1:</p>

<pre class="code prettyprint">YUI().use(&quot;datatype-xml&quot;, &quot;dataschema-xml&quot;, function(Y) {
    var data_in = Y.DataType.XML.parse(&#x27;&lt;desserts&gt;&lt;dessert type=&quot;treat&quot;&gt;&lt;name&gt;cupcake&lt;&#x2F;name&gt;&lt;flavors&gt;&lt;flavor name=&quot;chocolate&quot;&#x2F;&gt;&lt;flavor name=&quot;red velvet&quot;&#x2F;&gt;&lt;&#x2F;flavors&gt;&lt;&#x2F;dessert&gt;&lt;dessert type=&quot;treat&quot;&gt;&lt;name&gt;ice cream&lt;&#x2F;name&gt;&lt;flavors&gt;&lt;flavor name=&quot;chocolate&quot;&#x2F;&gt;&lt;flavor name=&quot;strawberry&quot;&#x2F;&gt;&lt;flavor name=&quot;vanilla&quot;&#x2F;&gt;&lt;&#x2F;flavors&gt;&lt;&#x2F;dessert&gt;&lt;dessert type=&quot;treat&quot;&gt;&lt;name&gt;pie&lt;&#x2F;name&gt;&lt;flavors&gt;&lt;flavor name=&quot;banana cream&quot;&#x2F;&gt;&lt;flavor name=&quot;blueberry&quot;&#x2F;&gt;&lt;flavor name=&quot;cherry&quot;&#x2F;&gt;&lt;&#x2F;flavors&gt;&lt;&#x2F;dessert&gt;&lt;dessert type=&quot;beverage&quot;&gt;&lt;name&gt;hot chocolate&lt;&#x2F;name&gt;&lt;&#x2F;dessert&gt;&lt;dessert type=&quot;beverage&quot;&gt;&lt;name&gt;port wine&lt;&#x2F;name&gt;&lt;&#x2F;dessert&gt;&lt;&#x2F;desserts&gt;&#x27;),
        schema = {
            resultListLocator: &quot;dessert&quot;,
            resultFields: [
                {key:&quot;type&quot;, locator:&quot;@type&quot;},
                {key:&quot;name&quot;, locator:&quot;name&quot;},
                {key:&quot;flavors&quot;, schema: {
                    resultListLocator: &quot;flavor&quot;,
                    resultFields: [
                        {key:&quot;flavor&quot;, locator:&quot;@name&quot;}
                    ]
                }}
            ]
        },
        data_out = Y.DataSchema.XML.apply(schema, data_in));

    alert(data_out);
});</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Schema parsing a JavaScript array.">
                                        <a href="dataschema-array.html">DataSchema.Array</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Schema parsing JSON data.">
                                        <a href="dataschema-json.html">DataSchema.JSON</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Schema parsing XML data.">
                                        <a href="dataschema-xml.html">DataSchema.XML for XML Data</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Schema parsing data held in TABLE elements.">
                                        <a href="dataschema-table.html">DataSchema.XML for HTML Tables</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Schema parsing delimited plain-text data.">
                                        <a href="dataschema-text.html">DataSchema.Text</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Parsing data into specified types as the schema is being applied.">
                                        <a href="dataschema-parsing.html">Enforcing DataTypes</a>
                                    </li>
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                                    <li data-description="The Local DataSource manages retrieval of in-page data, from JavaScript arrays and objects to DOM elements.">
                                        <a href="../datasource/datasource-local.html">DataSource.Local</a>
                                    </li>
                                
                            
                                
                                    <li data-description="The Get DataSource, which manages retrieval of data from remote sources via the Get Utility, can be useful for accessing data from cross-domain servers without the need for a proxy.">
                                        <a href="../datasource/datasource-get.html">DataSource.Get</a>
                                    </li>
                                
                            
                                
                                    <li data-description="The IO DataSource manages retrieval of data from remote sources, via the IO Utility.">
                                        <a href="../datasource/datasource-io.html">DataSource.IO</a>
                                    </li>
                                
                            
                                
                                    <li data-description="The Function DataSource, which manages retrieval of data from a JavaScript function, provides a highly customizeable mechanism for implementer-defined data retrieval algorithms">
                                        <a href="../datasource/datasource-function.html">DataSource.Function</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Use the DataSourceCache plugin to enable caching and reduce server calls to remote sources.">
                                        <a href="../datasource/datasource-caching.html">DataSource with Caching</a>
                                    </li>
                                
                            
                                
                                    <li data-description="The DataSourceCache plugin supports offline caching so that cached data persists across browser sessions.">
                                        <a href="../datasource/datasource-offlinecache.html">DataSource with Offline Cache</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
